<template>
    <div class="enterprise_step4">
        <div class="title">微信支付报备成功！</div>
        <div class="wx_code">微信支付商户号：{{ props.query.simId }}</div>
        <div class="desc">请扫码核对信息并确认~</div>
        <el-image class="qr_code" :src="state.qrCodeUrl" />
        <div class="btn">
            <el-button @click="submitHandle" type="primary">微信线下认证已完成</el-button>
        </div>
        <el-dialog v-model="state.dialogVisible" title="提示" width="300px" align-center>
            <div class="dialog">
                <div class="dialog_header">
                    <span>提示</span>
                    <el-icon class="icon_close" @click="state.dialogVisible = false"><CircleCloseFilled /></el-icon>
                </div>
                <div class="dialog_body">
                    <div class="title mb16">请先微信开户意愿确认</div>
                    <div>若已核实商家身份，请等待微信审核通过</div>
                </div>
                <div class="dialog_footer">
                    <el-button @click="state.dialogVisible = false" type="primary">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import request from '@/request';
import { throttle } from '@/commons/utils';
import { reactive } from 'vue';

const props = defineProps({
    query: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['stepChange']);
const state = reactive({
    dialogVisible: false,
    qrCodeUrl: ''
});
// 获取微信线下二维码
const getQrcode = async id => {
    const { data } = await request('baofuQrcode', id);
    state.qrCodeUrl = data.url;
};
getQrcode(props.query.id);
// 微信线下认证已完成
const submitHandle = throttle(async () => {
    const params = {
        shopId: props.query.shopId,
        // 账号登录号
        loginNo: props.query.loginNo
    };
    const { code } = await request('baofuConfirm', params);
    if (code === 0) {
        emit('stepChange');
    } else {
        state.dialogVisible = true;
    }
}, 1000);
</script>

<style lang="scss" scoped>
.enterprise_step4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    .title {
        font-size: 20px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
    }
    .wx_code {
        padding-top: 16px;
        font-size: 20px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #ff6b00;
    }
    .desc {
        padding: 40px 0 8px;
        font-size: 16px;
        line-height: 17px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
    }
    .qr_code {
        width: 300px;
        height: auto;
    }
    .btn {
        padding-top: 40px;
    }

    :deep(.el-dialog) {
        .el-dialog__header {
            display: none;
        }
        .el-dialog__body {
            padding: 0;
        }
    }
    .dialog {
        padding-bottom: 16px;
        border: 1px solid #eaeaea;
        background-color: #fff;

        .dialog_header {
            position: relative;
            padding: 16px;
            font-weight: 700;
            &::before {
                content: '';
                position: absolute;
                top: -9px;
                right: -9px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: #fff;
            }
            .icon_close {
                position: absolute;
                top: -11px;
                right: -11px;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                font-size: 22px;
                color: #00000033;
                overflow: hidden;
                cursor: pointer;
            }
        }
        .dialog_body {
            text-align: center;
            padding: 16px;
        }
        .dialog_footer {
            margin-top: 30px;
            text-align: center;
            .el-button {
                width: 90%;
                border-radius: 15px;
            }
        }
    }
}
</style>
